<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->
		<link rel="stylesheet" href="css/index.css" />
		
		<link rel="stylesheet" href="css/out.css" />

	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">域名</span>
					<span class="nav-item">域名转入列表</span>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span class="from-title">
							转入列表</span>
					</div>

					<ul class="notice-wrapper">
						<li class="notice-item">域名注册 60 天内，域名到期前 30 天内，域名最近一次成功转移 60 天内，无法转移。</li>
						<li class="notice-item">域名转入须支付域名续费 1 年的费用（转入服务免费，但根据 ICANN 规定，域名转入必须在原期限上续费 1 年）。注意，域名最长购买年限为 10 年，如您的域名在转入前使用年限已超过 9 年，则域名转入后无法增加完整的 1 年年限。</li>
						<li class="notice-item">域名转入周期为 7-15 天，取决于域名原注册商的转出确认时间。转移期间不影响域名正常使用</li>
					</ul>
					
					<div @click="handleClickOutDomainName" class="yzButton register deep mb-20">转入域名</div>

					<el-table empty-text ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
						<el-table-column label="域名" width="auto">
							<template slot-scope="scope">
								{{scope.row.name}}
							</template>
						</el-table-column>

						<el-table-column label="添加时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.addTime}}
							</template>
						</el-table-column>

						<el-table-column width="auto" label="转入成功时间">
							<template  slot-scope="scope">
								{{scope.row.outSuccessTime}}
							</template>
						</el-table-column>
						
						
						
						<el-table-column width="auto" label="状态(全部)">
							<template slot-scope="scope">
								<div class="fboxRow">
									<div style="width: 57px;" class="fboxCenter" v-html="handlestatus(scope.row)"></div>
									<span v-if="scope.row.status === 'transfering'" style="display: inline-block;color: #6462F3;margin-left: 28px;" @click="handleClickCancelOut(scope.row)" class="opearButton">取消转入</span>
								</div>
								
							</template>
						</el-table-column>


					</el-table>
					<div class="pagination-wrapper">
						<div class="total-wrapper">
							<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :total="pageInfo.totalSize">
						</el-pagination>
					</div>

					<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="domainNameOutreusltVisble">
						<div slot="title" class="dialog-title">
							取消域名转入
						</div>
						<div class="dialog-content">
							<div class="dialog-content-infowrapper fboxRow mb-20">
								<img class="mr-20 flagImg" src="../img/warning-orange02.png" />
								<p class="fboxCenter" style="line-height: 25px;">
									是否取消转入该域名
								</p>
							</div>
							<el-table empty-text :data="[outResultInfo]" tooltip-effect="dark" style="width: 100%;margin-bottom: 50px;">
								<el-table-column label="域名" width="auto">
									<template slot-scope="scope">
										{{scope.row.name}}
									</template>
								</el-table-column>

								<el-table-column width="auto" label="添加时间">
									<template slot-scope="scope">
										{{scope.row.addTime}}
									</template>
								</el-table-column>
							</el-table>



							<div class="dialog-button-wrapper fboxRow">
								<div @click="confirmCancelOutDomainName" class="yzButton  confirm">确认</div>
								<div @click="domainNameOutreusltVisble = false" class="yzButton cancelButton">取消</div>
							</div>
						</div>
					</el-dialog>

				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						//  新增
						domainNameOutreusltVisble: false, // 转出  dialog
						//  转出结果信息
						outResultInfo: {

						},
						// 表格数据
						tableData: [{
							id: 1,
							name: 'baidu.com', // 域名名称
							status: 'transfering', // 状态
							addTime: '2020-11-25', // 添加时间
							outSuccessTime: undefined, // 转出成功时间
						}, {
							id: 2,
							name: 'baidu1.com', // 域名名称
							status: 'success', // 状态
							addTime: '2020-11-25', // 添加时间
							outSuccessTime: '2020-11-30', // 转出成功时间
						}, {
							id: 3,
							name: 'baidu2.com', // 域名名称
							status: 'success', // 状态
							addTime: '2020-11-25', // 添加时间
							outSuccessTime: '2020-11-30', // 转出成功时间
						}, {
							id: 4,
							name: 'baidu3.com', // 域名名称
							status: 'fail', // 状态
							addTime: '2020-11-25', // 添加时间
							outSuccessTime: '2020-11-30', // 转出成功时间
						}, {
							id: 5,
							name: 'baidu3.com', // 域名名称
							status: 'cancel', // 状态
							addTime: '2020-11-25', // 添加时间
							outSuccessTime: '2020-11-30', // 转出成功时间
						}],


						isFirstShowOrderType: true, // 是否是第一次展示工单类型
						selectOrderType: 'allOrder', // 选中工单类型  默认为全选
						orderTypeGroup: [{
								label: '全部',
								value: 'allOrder'
							},
							{
								label: '未处理',
								value: 'waithandle'
							}, {
								label: '处理中',
								value: 'handling'
							}, {
								label: '已处理',
								value: 'alreadyhandle'
							}, {
								label: '已评价',
								value: 'alreadyestimate'
							}
						],
						searchkeywords: undefined, //  搜索关键字


						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 41
						},
						pageOptions: [{
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],


					}
				},

				methods: {
					// 确认取消域名
					confirmCancelOutDomainName:_throttle(function() {
						console.log('确认取消域名')
						console.log(this.outResultInfo) 
						this.domainNameOutreusltVisble = false
					}),
					
					// 点击转出域名
					handleClickOutDomainName: _throttle(function() {
						console.log('跳转到 域名表单提交页面')
						window.open('inForm.html','_self')
					}),
					
					// 点击取消转入
					handleClickCancelOut: _throttle(function(row){
						this.outResultInfo = deepCopy(row)
						this.domainNameOutreusltVisble = true
					}),
					


					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},


					//处理状态
					handlestatus: function(row) {
						// 状态  激活：activate ；  欺诈 cheat；待审核 waitHandle; overdue 过期
						switch (row.status) {
							case 'success':
								return '<p style="color:#3FBF70">转出成功</p>'
							case 'fail':
								return '<p style="color:#F21C30">转出失败</p>'
							case 'transfering':
								return '<p style="color:#6462F3">转出中</p>'
							case 'cancel':
								return '<p>转出取消</p>'
							default:
								break;
						}

					},
					handleSizeChange: function(e) {
						console.log(e)
					},
					handleCurrentChange: function(val) {
						console.log('当前页为xxxxx')
					},



				},
				mounted: function() {
					
				}

			})
		</script>
	</body>
</html>
